<?php
    
     /**
	 * Elgg flickr view page
	 *
	 * @package ElggFlickr
	 * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU Public License version 2
	 * @author Curverider Ltd <info@elgg.com>
	 * @copyright Curverider Ltd 2008
	 * @link http://elgg.com/
	 */
	 
	 //some required params
	 
	 $flickr_id = $vars['entity']->title;
	 
    // if the flickr id is empty, then do not sure any photos
    if($flickr_id){
	 
?>
<script type="text/javascript" src="<?php echo $vars['url']; ?>mod/flickr/views/default/flickr/js/cycle.js"></script>
<script>

    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=<?php echo $flickr_id; ?>&lang=en-us&format=json&jsoncallback=?", function(data){
        $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images")
            .wrap("<a href='" + item.link + "'></a>");
    });
  
    $('#images').cycle({
        fx:     'fade',
        speed:    'slow',
        timeout:  0,
        next:   '#next',
        prev:   '#prev'
    });
  
});

</script>

<style type="text/css">
    #images { 
        height: 180px;
        width: 100%; 
        padding:0; 
        margin:0 0 10px 0; 
        overflow: hidden;
     }
      #images img { 
          border:none;
      }
</style>

<!-- div where the images will display -->
<div id="title"></div>
<div id="images" align="center"></div>

<!-- next and prev nav -->
<div class="flickrNav" align="center">
    <a id="prev" href="#">&laquo; Prev</a> <a id="next" href="#">Next &raquo;</a>
</div>

<?php 

    }else{
        
        echo "You have not yet entered your Flickr ID which is required to display your photos.";
        
    }
?>